<template>
	<view class="content">
		<view class="header">
			<view class="box">
				<text class="iconfont icon-left" @click="go()"></text>
				<text class="title">律师费估算</text>
			</view>
		</view>
		<view class="bosx">
			<view class="item">
				<text class="fl">律师服务地点</text>
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}</view>
				</picker>
			</view>
			<view class="item">
				<text class="fl">案件类型</text>
				<picker @change="bindPickerChange1" :value="index1" :range="array1">
					<view class="uni-input">{{array1[index1]}}</view>
				</picker>
			</view>
			<view class="item">
				<text class="fl">是否涉及支付金额</text>
				<view class="roed">
					<radio-group @change="radioChange">
						<label class="radio">
							<radio value="1" :checked="1 === current" />是</label>
						<label class="radio">
							<radio value="2" :checked="2 === current" />否</label>
					</radio-group>
				</view>
			</view>
			<view class="item" v-if="show1">
				<text class="fl">金额</text>
				<input type="text" value="" placeholder="（元）" placeholder-class="s" />
			</view>
		</view>
		<view class="button" @click="show = !show">计算</view>
		<view class="jieguo" v-if="show">
			<text class="titles">计算结果（元）</text>
			<view class="box">
				<view>
					<text class="ff">00</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['江苏', '上海', '南京', '无锡'],
				index: 0,
				array1: ['民事类', '刑事类', '行政类'],
				index1: 0,
				current: 1,
				show: false,
				show1: true
			}
		},
		onLoad() {

		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			bindPickerChange1: function(e) {
				this.index1 = e.target.value
			},
			radioChange: function(evt) {
				this.current = evt.target.value
				if(this.current == 1){
					this.show1 = true
				}else{
					this.show1 = false
				}
			},
			go(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	view,
	text,
	input,
	textarea {
		box-sizing: border-box;
	}

	page {
		background: #ECEDEE;
	}

	.uni-label-pointer {
		font-size: 28rpx;
		color: #2D2D2D;
		margin-left: 20rpx;
	}

	.fs {
		font-size: 28rpx;
		color: #959595;
	}

	.jieguo {
		overflow: hidden;
		width: 690rpx;
		margin: 0 auto;

		.titles {
			font-weight: bold;
			display: block;
			text-align: center;
			font-size: 34rpx;
			color: #F78200;
			line-height: 125rpx;
		}

		.box {
			overflow: hidden;
			width: 100%;
			padding: 0 34rpx;
			background: #F1E5D7;
			border-radius: 10rpx;

			view {
				overflow: hidden;
				width: 100%;
				height: 110rpx;
				border-bottom: 1px solid #DED3C7;
				display: flex;
				align-items: center;
				justify-content: center;

				&:last-child {
					border: none;
				}

				.f {
					font-size: 25rpx;
					color: #2D2D2D;
				}

				.ff {
					font-size: 25rpx;
					color: #F78200;
				}
			}
		}
	}

	.uni-input {
		font-size: 28rpx;
		display: block;
		color: #959595;
	}

	.fofont {
		width: 690rpx;
		margin: 0 auto;
		font-size: 20rpx;
		display: block;
		color: #A2A2A2;
		margin-top: 20rpx;
	}

	.bosx {
		overflow: hidden;
		background: #fff;
		padding: 0 20rpx;
		width: 690rpx;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 30rpx;

		.item {
			overflow: hidden;
			height: 100rpx;
			border-bottom: 1px solid #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.fl {
				font-size: 25rpx;
				color: #2D2D2D;
			}

			.fr {
				overflow: hidden;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				image {
					width: 17rpx;
					height: 29rpx;
					margin-left: 10rpx;
				}
			}

			input {
				width: 360rpx;
				height: 100%;
				border: none;
				outline: none;
				text-align: right;
				padding-right: 30rpx;
				font-size: 28rpx;
				color: #E8E8E8;
			}

			.s {
				font-size: 28rpx;
				color: #E8E8E8;
			}
		}
	}

	.button {
		width: 690rpx;
		height: 70rpx;
		background: #153B33;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		border-radius: 6rpx;
	}

	.content {
		overflow: hidden;
		width: 100%;
		position: relative;
		height: 100vh;

		.header {
			overflow: hidden;
			width: 100%;
			background-image: url(/static/fawu_06.jpg);
			background-size: 100% 33rpx;
			background-repeat: no-repeat;
			background-position: bottom center;
			height: 155rpx;
			background-color: #153B33;
			position: relative;
			padding: 60rpx 0 0 0;

			.box {
				overflow: hidden;
				width: 100%;
				display: flex;
				position: relative;
				align-items: center;
				justify-content: center;

				.title {
					font-size: 28rpx;
					color: #DBAC53;
				}
				.icon-shezhi{
					position: absolute;
					right: 17rpx;
					top: 50%;
					font-size: 30rpx;
					transform: translateY(-50%);
				}
				.icon-left{
					color: #DBAC53;
					position: absolute;
					left: 17rpx;
					font-size: 35rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}
</style>
